<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
  <!--引入开发版本Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
<body>
    
    <!-- 
        深度监视:
            (1).Vue中的watch默认不监测对象内部值的改变(一层).
            (2).配置deep:true可以监测对象内部值改变(多层).
        备注:
            (1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以！
            (2).使用watch时根据数据的具体结构,决定是否采用深度监视.    
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
       <h2>今天天气很 {{info}}</h2>
       <!--@click="这里可以写一些简单的语句 isHost =!isHost"  -->
        <button @click="changeWeather">切换天气</button>    
        <hr />
        <h3>a的值是: {{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>

        <h3>b的值是: {{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
     
  const vm =  new Vue({
        el:'#root',
        data:{
           isHost:true,
           numbers:{
                a:1,
                b:2
           }

        },
        //方法
        methods: {
            changeWeather(){
                this.isHost =!this.isHost
                this.x++
            }
        },
        //computed 计算属性
        computed:{
            info(){
                return this.isHost ? '炎热': '凉爽'
            }
        },
        //watch 监听属性
        watch:{
            isHost:{
                immediate:true,
                //handler什么时候调用？当isHost发生改变时.
                handler(newValue,oldValue){
                    console.log('isHost被修改了',newValue,oldValue);
                }
            },
            //监视多级结构中所有属性的变化
             numbers:{
                deep:true,
                handler(newValue,oldValue){
                    console.log('numbers改变了');
                }
             }

         /*    'numbers.a':{
                immediate:true,//初始化时让handle调用一下
                //handler什么时候调用？当isHost发生改变时.
                handler(newValue,oldValue){
                    console.log('a被修改了',newValue,oldValue);
                }
            } */
        },
    })

    console.log(vm);
</script>

</html>